<template>
    <div id="PermissionManage">
        <el-row style="margin-bottom: 20px;">
            <el-col :span="1">
                <el-button type="primary" @click="addNewPermission">新增权限</el-button>
            </el-col>
        </el-row>
         <el-table
            :data="roleList"
            style="width: 100%"
            border
            :row-class-name="tableRowClassName">
            <el-table-column
            prop="permissionName"
            label="角色名称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="description"
            label="描述"
            width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            </template>
            </el-table-column>
        </el-table>
         <el-pagination
                background
                layout="prev, pager, next"
                :total="totalRecord"
                @current-change="currentChange"
                style="text-align:left;margin-top:10px"
                >
        </el-pagination>
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import qs from 'qs'
export default {
    data() {
      return {
         roleList: [],
         offset: 18,
         totalRecord: 1
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
        handleEdit(index,item){
            //修改权限,记录当前权限
            localStorage.setItem('currentPermission',JSON.stringify(item));
            this.$router.push({name:'UpdatePermissionView'})
        },
        currentChange(value){
            this.loadData(value);
        },
      handleDelete(index,row){
        const action = ()=>{
            var deleteURL = window.baseURL+"/backstage/permission/delete"
            this.$http.post(deleteURL,qs.stringify({permissionId: row.permissionId,token: this.$token}))
            .then((response)=>{
                this.loadData();
            })
            .catch((error)=>{
            })
        }
        this.operatorConfirm(action,'删除权限');
      },
    //   跳转到新增权限的界面
      addNewPermission(){
          this.$router.push({name: 'AddPermissionView',params:{permissions: this.roleList}})
      },
      loadData(value){
            var _this = this;
            this.$http.get(window.baseURL+`/backstage/permission/findByPage?token=${this.$token}&pageNum=${value}&pageSize=10`)
            .then(function(response){
                response = response.data;
                _this.totalRecord = response.data.list.totalRecord;
                if(response){
                    _this.roleList = response.data.list.results;   
                }
            })
            .catch(function(error){
                console.log(error);
            })
      }
    },
    created(){
        this.loadData(1);
    },
    beforeRouteUpdate(to,from,next){
        if(to.name=="permission"){
            this.loadData(1);
        }
        next();
    }
}
</script>

<style lang="scss" scoped>
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  #PermissionManage {
      width: 100%;
      height: 100%;
      padding: 40px;
      position: absolute;
  }
</style>
